

<!-- 登录页面  -->

<template xmlns="http://www.w3.org/1999/html">

  <div id="loginBackground">
      <div id="titleCard">
<!--          苏世游戏玩家社区-->
      </div>

      <!--    表单框-->
      <div id="loginCard">
          <p style="font-size: 20px;margin-left: 20px;color: white">登录</p>
                  <el-input v-model="account" placeholder="请输入账号" class="loginInput" clearable />
                  <el-input  class="loginInput"
                             v-model="password"
                             type="password"
                             placeholder="请输入密码"
                             show-password/>
                  <el-input v-if="optionType===0"  class="loginInput"
                             v-model="passwordCheck"
                             type="password"
                             placeholder="请再次输入密码"
                             show-password/>

      <el-row class="mb-4">
          <el-button v-if="optionType===1" id="loginButton" type="primary" round @click="login()">
              登录</el-button>
          <el-button v-if="optionType===0" id="loginButton" type="primary" round @click="signUp()">
              注册</el-button>
      </el-row>
          <el-row>
          <el-switch v-if="optionType===1" size="large" style="margin-left: 320px"
                  v-model="admin"
                  inline-prompt
                  active-text="管理员"
                  inactive-text="普通用户"
          />
          </el-row>
          <span v-if="optionType===1" style="margin-left: 240px">
          <a class="linkLabel" @click="changeOptionType()">新用户？</a>
              |
          <a class="linkLabel">忘记密码？</a>
          </span>
          <span v-if="optionType===0" style="margin-left: 240px">
          <a class="linkLabel" @click="changeOptionType()">已有账号？返回登录</a>
          </span>

    </div>
  </div>






</template>
<!------------------------------------------------------------------------------------------------------------------------>
<script  setup>
import {ref} from "vue";
import router from "@/api/routerConfig";
import {getPostList} from "@/api/request";
import {ElMessage} from "element-plus";

const name = ref("Login.vue");
const account = ref('');
const password = ref('');
const passwordCheck = ref('')


// 操作类型 0-注册 1-登录
const optionType = ref(1)
// 登录身份 false-平台用户 true-管理员
const admin = ref(false)


async function login() {
    // alert("登录 " + "当前登录身份：" + admin.value)
    console.log("登录 " + "当前登录身份：" + admin.value)

    let resp = await getPostList({
        account: account.value,
        password: password.value,
        identity: admin.value ? 1 : 0
    }, "/login")

    if (resp.code !== 200) {
        ElMessage.error(resp.msg)
    }else {
        // 登录接口
        if (admin.value) {
            router.push("/manage")
        } else {
            router.push("/index")
        }
    }
}
async function signUp() {
    // 注册接口
  if (password.value !== passwordCheck.value) {
    ElMessage.error("两次密码不一致")
    return
  }

  let check = await getPostList({
    account: account.value
  }, "/user/checkAccount")
  if (check.code === 200) {
    let sign = await getPostList({
      account: account.value,
      password: password.value,
      identity: 0
    }, "/signUp")

    if (sign.code === 200) {
      ElMessage.success("注册成功，请登录")
      router.replace("/")
    }else {
      ElMessage.error("注册失败")
    }

  }else {
    ElMessage.error("账号已存在，请重试或直接登录")
  }


}

function changeOptionType() {
    if (optionType.value === 1) {
        console.log(optionType.value)
        optionType.value = 0
    }else {
        console.log(optionType.value)
        optionType.value = 1
    }
}


</script>

<!---------------------------------------------------------------------------------------------------------------------------->

<style scoped>
#loginBackground {
    background:url("../../../public/pictures/background/hunter_selver.jpg");
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
    display: flex;
    float: left;
}

.loginInput {
    width: 300px;
    height: 40px;
    margin: 10px 10px 10px 100px;
}
#titleCard {
    font-size: 4em;
    color: white;
    width: 400px;
    height: 600px;
    align-self: center;
    margin-top: 50px;
    margin-left: 200px;

}
#loginCard {
    width: 500px;
    /*width: 50%;*/
    height: 600px;

    /*background-color: white;*/
    background:url("../../../public/pictures/background/loginBackground2.jpg");
    position:fixed;
    background-size:100% 100%;

    /*align-self: center;*/
    margin-left: 30%;
    margin-top: 10%;

/*    加阴影  偏移量-透明度-阴影范围*/
    box-shadow: 0 0 60px 20px #999999;
}
#loginButton {
    width: 120px;
    height: 40px;
    font-size: 1.5em;
    margin: 10px 10px 10px 180px;
}
.linkLabel {
    color: blue;
}

</style>